<template>
  <div class="vue-container">
    <el-dialog
      ref="maxDialog"
      v-drag
      :title="ruleForm.id ? '编辑岗位' : '新增岗位'"
      :visible.sync="dialogVisible"
      width="450px"
      @closed="closedDialog"
    >
      <el-form
        ref="reform"
        v-loading="loading"
        :model="ruleForm"
        status-icon
        :rules="rules"
        :size="size"
        label-width="90px"
        :show-message="showMessage"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        element-loading-text="数据正在加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-form-item label="岗位编码" prop="code">
          <el-input
            v-model.trim="ruleForm.code"
            placeholder="请输入岗位编码"
            maxlength="20"
            type="text"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="岗位名称" prop="name">
          <el-input
            v-model.trim="ruleForm.name"
            placeholder="请输入岗位名称"
            type="text"
            maxlength="20"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="岗位状态" prop="status">
          <el-radio
            v-for="(item, index) in obj.statusList"
            :key="index"
            v-model="ruleForm.status"
            :label="Number(item.code)"
          >
            {{ item.label }}
          </el-radio>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model.trim="ruleForm.sort"
            placeholder="请输入排序"
            style="width: 100%;"
            :min="0"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="岗位备注" prop="remarks">
          <el-input
            v-model.trim="ruleForm.remarks"
            placeholder="请输入岗位备注"
            type="textarea"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" @click="dialogVisible = false">取消</el-button>
        <el-button v-throttle :size="size" :loading="loading" type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mixin } from '@/views/pages/mixin/save'
export default {
  name: 'PostSave',
  mixins: [mixin],
  data() {
    return {
      ruleForm: { },
      // 表单校验
      rules: {
        code: [{ required: true, message: '请输入岗位编码', trigger: 'change' }],
        name: [{ required: true, message: '请输入岗位名称', trigger: 'change' }],
        status: [{ required: true, message: '请选择岗位状态', trigger: 'change' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'change' }]
      }
    }
  },
  methods: {
    // 弹出窗口加载
    openDialog(rows) {
      this.dialogVisible = true
      if (rows) this.ruleForm = { ...this.ruleForm, ...rows }
      else this.ruleForm = { status: 1, sort: 0 }
    }
  }
}
</script>
